import { PlusOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer } from 'antd';
import React, { useState, useRef } from 'react';
import { useIntl, FormattedMessage } from 'umi';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import ProDescriptions from '@ant-design/pro-descriptions';
import type { FormValueType } from './components/UpdateForm';
import UpdateForm from './components/UpdateForm';
import type { TableListItem } from './data.d';
import { queryRule, updateRule, addRule, removeRule } from './service';

/**
 * 添加节点
 * @param fields
 */
const handleAdd = async (fields: TableListItem) => {
  const hide = message.loading('正在添加');
  try {
    await addRule({ ...fields });
    hide();
    message.success('添加成功');
    return true;
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};

/**
 * 更新节点
 * @param fields
 */
const handleUpdate = async (fields: FormValueType) => {
  const hide = message.loading('正在配置');
  try {
    await updateRule({
      name: fields.name,
      desc: fields.desc,
      key: fields.key,
    });
    hide();

    message.success('配置成功');
    return true;
  } catch (error) {
    hide();
    message.error('配置失败请重试！');
    return false;
  }
};

/**
 *  删除节点
 * @param selectedRows
 */
const handleRemove = async (selectedRows: TableListItem[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;
  try {
    await removeRule({
      key: selectedRows.map((row) => row.key),
    });
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

const TableList: React.FC = () => {
  /**
   * 新建窗口的弹窗
   */
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  /**
   * 分布更新窗口的弹窗
   */
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);

  const [showDetail, setShowDetail] = useState<boolean>(false);

  const actionRef = useRef<ActionType>();
  const [currentRow, setCurrentRow] = useState<TableListItem>();
  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);


  const columns: ProColumns<TableListItem>[] = [
    {
      title:"日期",
      valueType: 'dateTime',
      dataIndex: 'dateTime',
      hideInForm: true,
      hideInSearch:true,
      width:200
    },
    {
      title:"用户ID",
      dataIndex: 'userId',
      hideInForm: true,
      hideInSearch:true,
    },
    {
      title: "微信",
      dataIndex: 'wx',
    },
    {
      title: "旺旺",
      dataIndex: 'ww',
    },
    {
      title: "电话",
      dataIndex: 'phone',
      hideInForm: true,
    },
    {
      title: "姓名",
      dataIndex: 'peopleName',
    },
    {
      title: "店铺",
      dataIndex: 'shop',
    },
    {
      title: "备注",
      dataIndex: 'remarks',
      hideInForm: true,
      hideInSearch:true,
    },
    {
      title:"负责人",
      dataIndex:"create_people",
      hideInForm: true,
      hideInSearch:true,
    }
  ];

  return (
    <PageContainer>
      <ProTable<TableListItem>
        headerTitle={"查询表格"}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        options={false}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalVisible(true);
            }}
          >
            <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
          </Button>,
        ]}
        request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
        columns={columns}
      />
      <ModalForm
        title="新增数据"
        width="400px"
        visible={createModalVisible}
        onVisibleChange={handleModalVisible}
        onFinish={async (value) => {
          const success = await handleAdd(value as TableListItem);
          if (success) {
            handleModalVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: "微信必填",
            },
          ]}
          label="微信"
          width="md"
          name="wx"
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: "旺旺必填",
            },
          ]}
          label="旺旺"
          width="md"
          name="ww"
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: "电话必填",
            },
          ]}
          label="电话"
          width="md"
          name="phone"
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: "姓名必填",
            },
          ]}
          label="姓名"
          width="md"
          name="peopleName"
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: "店铺必填",
            },
          ]}
          label="店铺"
          width="md"
          name="shop"
        />
        <ProFormTextArea name="remarks" width="md" label="备注"/>
      </ModalForm>
    </PageContainer>
  );
};

export default TableList;
